<template>
    <div class>
      <div class="card tr mb2">
        <el-tooltip content="显示字段筛选" placement="bottom" effect="light">
          <el-popover placement="bottom" width="200" trigger="click">
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选
            </el-checkbox>
            <el-checkbox-group v-model="showItemList" @change="handleCheckedChange">
              <el-checkbox v-for="(item,key) in allItemList" :key="key" :label="item">{{item.name}}</el-checkbox>
            </el-checkbox-group>
            <el-button slot="reference" icon="el-icon-menu" size="mini" type="primary" circle></el-button>
          </el-popover>
        </el-tooltip>
        <el-tooltip content="展开/收起表单" placement="bottom" effect="light">
          <el-button icon="el-icon-search" @click="formShow= !formShow" size="mini" type="primary" circle></el-button>
        </el-tooltip>
        <el-tooltip content="下载当前表格数据" placement="bottom" effect="light">
          <el-button icon="el-icon-download" @click="handleDownload" size="mini" type="primary" circle></el-button>
        </el-tooltip>
        <el-button size="mini" type="primary" icon="el-icon-plus" @click="showDialog">添加</el-button>
      </div>
      <div class="card" v-show="formShow">
        <el-form size="mini" :style="style" :model="ruleForm" ref="ruleForm" inline label-width="100px"
          class="demo-ruleForm">
                        <my-form-item label="请假类型" prop="leaveType">
                    <el-input size="mini" v-model="ruleForm.leaveType"></el-input>
                  </my-form-item>
                        <my-form-item label="开始时间" prop="startTime">
                    <el-date-picker style="width: 178px" v-model="ruleForm.startTime" type="datetime"
                      placeholder="选择日期">
                    </el-date-picker>
                  </my-form-item>
                        <my-form-item label="结束时间" prop="endTime">
                    <el-date-picker style="width: 178px" v-model="ruleForm.endTime" type="datetime"
                      placeholder="选择日期">
                    </el-date-picker>
                  </my-form-item>
                        <my-form-item label="时长" prop="timeLength">
                    <el-input size="mini" v-model="ruleForm.timeLength"></el-input>
                  </my-form-item>
                        <my-form-item label="请假人" prop="leaveUserName">
                    <el-input size="mini" v-model="ruleForm.leaveUserName"></el-input>
                  </my-form-item>
                        <my-form-item label="请假状态" prop="leaveStatus">
                    <el-input size="mini" v-model="ruleForm.leaveStatus"></el-input>
                  </my-form-item>
                        <my-form-item label="审核人" prop="checkUserName">
                    <el-input size="mini" v-model="ruleForm.checkUserName"></el-input>
                  </my-form-item>
                        <my-form-item label="审批人" prop="approvalUserName">
                    <el-input size="mini" v-model="ruleForm.approvalUserName"></el-input>
                  </my-form-item>
                        <my-form-item label="请假事由" prop="leaveRemarks">
                    <el-input size="mini" v-model="ruleForm.leaveRemarks"></el-input>
                  </my-form-item>
          <my-form-item>
            <el-button size="mini" type="primary" @click="submitForm('ruleForm')">查询</el-button>
            <el-button size="mini" @click="resetForm('ruleForm')">重置</el-button>
          </my-form-item>
        </el-form>
      </div>
      <img :src="imgSrc">
      <el-table stripe :data="tableData" border style="width: 100%">
        <el-table-column type="index" width="60px" align="center" fixed="left" label="序号"></el-table-column>
        <el-table-column v-for="(item,index) in showItemList" align="center" :width="item.width || '' " :key="index" :label="item.name">
          <template slot-scope="scope">
            <template v-if="!item.formatter">{{ scope.row[item.key] }}</template>
            <template v-else>
              <span v-text="item.formatter(scope.row, item)"></span>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200px" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="leaveApply(scope.$index, scope.row)">申请</el-button>
            <el-button size="mini" @click="search(scope.$index, scope.row)">查看</el-button>
            <el-button size="mini" @click="showEditDialog(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-card style="text-align:right;">
        <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="currentPage"
          :page-sizes="[ 10, 20,30, 40]" :page-size="pageSize" background layout="total, sizes, prev, pager, next"
          :total="total"></el-pagination>
      </el-card>
      <!-- --------------------------------------------------------添加弹出框 -->
      <el-dialog title="新增管理" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
        <el-form size="mini" :style="style" :model="addForm" ref="addForm" :rules="rules" inline label-width="100px"
          class="demo-ruleForm">
                      <my-form-item label="请假类型" :label-width="formLabelWidth" prop="leaveType">
                  <el-input size="mini" maxlength="255" show-word-limit v-model="addForm.leaveType"></el-input>
                </my-form-item>
                      <my-form-item label="开始时间" :label-width="formLabelWidth" prop="startTime">
                  <el-date-picker style="width: 178px" v-model="addForm.startTime" type="datetime"
                    placeholder="选择日期">
                  </el-date-picker>
                </my-form-item>
                      <my-form-item label="结束时间" :label-width="formLabelWidth" prop="endTime">
                  <el-date-picker style="width: 178px" v-model="addForm.endTime" type="datetime"
                    placeholder="选择日期">
                  </el-date-picker>
                </my-form-item>
                      <my-form-item label="时长" :label-width="formLabelWidth" prop="timeLength">
                  <el-input size="mini" maxlength="32" show-word-limit v-model="addForm.timeLength"></el-input>
                </my-form-item>
                      <my-form-item label="请假人" :label-width="formLabelWidth" prop="leaveUserName">
                  <el-input size="mini" maxlength="255" show-word-limit v-model="addForm.leaveUserName"></el-input>
                </my-form-item>
                      <my-form-item label="请假状态" :label-width="formLabelWidth" prop="leaveStatus">
                  <el-input size="mini" maxlength="255" show-word-limit v-model="addForm.leaveStatus"></el-input>
                </my-form-item>
                      <my-form-item label="审核人" :label-width="formLabelWidth" prop="checkUserName">
                  <el-input size="mini" maxlength="255" show-word-limit v-model="addForm.checkUserName"></el-input>
                </my-form-item>
                      <my-form-item label="审批人" :label-width="formLabelWidth" prop="approvalUserName">
                  <el-input size="mini" maxlength="255" show-word-limit v-model="addForm.approvalUserName"></el-input>
                </my-form-item>
                      <my-form-item label="请假事由" :label-width="formLabelWidth" prop="leaveRemarks">
                  <el-input size="mini" maxlength="255" show-word-limit v-model="addForm.leaveRemarks"></el-input>
                </my-form-item>
                      <my-form-item label="审核人id" :label-width="formLabelWidth" prop="checkUserId">
                  <el-input size="mini" maxlength="32" show-word-limit v-model="addForm.checkUserId"></el-input>
                </my-form-item>
                      <my-form-item label="审批人id" :label-width="formLabelWidth" prop="approvalUserId">
                  <el-input size="mini" maxlength="32" show-word-limit v-model="addForm.approvalUserId"></el-input>
                </my-form-item>
                      <my-form-item label="请假人id" :label-width="formLabelWidth" prop="leaveUserId">
                  <el-input size="mini" maxlength="32" show-word-limit v-model="addForm.leaveUserId"></el-input>
                </my-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="mini" @click="dialogFormVisible = false">取 消</el-button>
          <el-button size="mini" type="primary" @click="handleAdd()">确 定</el-button>
        </div>
      </el-dialog>
      <!-- --------------------------------------------------------编辑弹出框 -->
      <el-dialog title="编辑管理" :visible.sync="dialogEditVisible" :close-on-click-modal="false">
        <el-form size="mini" :style="style" :model="editForm" ref="editForm" :rules="rules" inline label-width="100px"
          class="demo-ruleForm">
                      <my-form-item label="请假类型" :label-width="formLabelWidth" prop="leaveType">
                  <el-input size="mini" maxlength="255" show-word-limit v-model="editForm.leaveType"></el-input>
                </my-form-item>
                      <my-form-item label="开始时间" :label-width="formLabelWidth" prop="startTime">
                  <el-date-picker style="width: 178px" v-model="editForm.startTime" type="datetime"
                    placeholder="选择日期">
                  </el-date-picker>
                </my-form-item>
                      <my-form-item label="结束时间" :label-width="formLabelWidth" prop="endTime">
                  <el-date-picker style="width: 178px" v-model="editForm.endTime" type="datetime"
                    placeholder="选择日期">
                  </el-date-picker>
                </my-form-item>
                      <my-form-item label="时长" :label-width="formLabelWidth" prop="timeLength">
                  <el-input size="mini" maxlength="32" show-word-limit v-model="editForm.timeLength"></el-input>
                </my-form-item>
                      <my-form-item label="请假人" :label-width="formLabelWidth" prop="leaveUserName">
                  <el-input size="mini" maxlength="255" show-word-limit v-model="editForm.leaveUserName"></el-input>
                </my-form-item>
                      <my-form-item label="请假状态" :label-width="formLabelWidth" prop="leaveStatus">
                  <el-input size="mini" maxlength="255" show-word-limit v-model="editForm.leaveStatus"></el-input>
                </my-form-item>
                      <my-form-item label="审核人" :label-width="formLabelWidth" prop="checkUserName">
                  <el-input size="mini" maxlength="255" show-word-limit v-model="editForm.checkUserName"></el-input>
                </my-form-item>
                      <my-form-item label="审批人" :label-width="formLabelWidth" prop="approvalUserName">
                  <el-input size="mini" maxlength="255" show-word-limit v-model="editForm.approvalUserName"></el-input>
                </my-form-item>
                      <my-form-item label="请假事由" :label-width="formLabelWidth" prop="leaveRemarks">
                  <el-input size="mini" maxlength="255" show-word-limit v-model="editForm.leaveRemarks"></el-input>
                </my-form-item>
                      <my-form-item label="审核人id" :label-width="formLabelWidth" prop="checkUserId">
                  <el-input size="mini" maxlength="32" show-word-limit v-model="editForm.checkUserId"></el-input>
                </my-form-item>
                      <my-form-item label="审批人id" :label-width="formLabelWidth" prop="approvalUserId">
                  <el-input size="mini" maxlength="32" show-word-limit v-model="editForm.approvalUserId"></el-input>
                </my-form-item>
                      <my-form-item label="请假人id" :label-width="formLabelWidth" prop="leaveUserId">
                  <el-input size="mini" maxlength="32" show-word-limit v-model="editForm.leaveUserId"></el-input>
                </my-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="mini" @click="dialogEditVisible = false">取 消</el-button>
          <el-button size="mini" type="primary" @click="handleEdit()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
    const defaultFormThead = [
      { key: "leaveType", name: "请假类型" },
      {
        key: "startTime", name: "开始时间",
        formatter: row => {
          if (row.startTime) {
            return (new Date(row.startTime)).toLocaleString();
          }else{
            return '';
          }
      } 
                               },
      {
        key: "endTime", name: "结束时间",
        formatter: row => {
          if (row.endTime) {
            return (new Date(row.endTime)).toLocaleString();
          }else{
            return '';
          }
      } 
                               },
      { key: "timeLength", name: "时长" },
      { key: "leaveUserName", name: "请假人" },
      { key: "leaveStatus", name: "请假状态" },
      { key: "checkUserName", name: "审核人" },
      { key: "approvalUserName", name: "审批人" },
      { key: "leaveRemarks", name: "请假事由" },
      ];
    import EnumSelector from '@/pages/comm/enumSelector'
    export default {
      components: { EnumSelector },
      data() {
        return {
          imgSrc:'',
          checkAll: true,
          isIndeterminate: false,
          allItemList: defaultFormThead,
          showItemList: defaultFormThead,
          formShow: false,
          dialogFormVisible: false,
          dialogEditVisible: false,
          offForm: true, //是否折叠
          folding: false, //表单是否超过一行
          formLabelWidth: "80px",
          tableData: [],
          total: 0,
          pageSize: 10,
          currentPage: 1,
          ruleForm: {
            leaveType: '',
            startTime: '',
            endTime: '',
            timeLength: '',
            leaveUserName: '',
            leaveStatus: '',
            checkUserName: '',
            approvalUserName: '',
            leaveRemarks: '',
        },
      style: {},
      rules: {
        },
    addForm: {
                     leaveType: '',
                     startTime: '',
                     endTime: '',
                     timeLength: '',
                     leaveUserName: '',
                     leaveStatus: '',
                     checkUserName: '',
                     approvalUserName: '',
                     leaveRemarks: '',
                     checkUserId: '',
                     approvalUserId: '',
                     leaveUserId: '',
        },
    editForm: {
                     leaveType: '',
                     startTime: '',
                     endTime: '',
                     timeLength: '',
                     leaveUserName: '',
                     leaveStatus: '',
                     checkUserName: '',
                     approvalUserName: '',
                     leaveRemarks: '',
                     checkUserId: '',
                     approvalUserId: '',
                     leaveUserId: '',
        }
      };
    },
  
    mounted() {
      this.init();
      let formHeight = this.$refs.ruleForm.$el.clientHeight;
      if (formHeight > 62) {
        this.folding = true;
        this.style = {
          height: "62px",
          overflow: "hidden"
        };
      } else {
        this.folding = false;
        this.style = {
          height: "auto",
          overflow: "hidden"
        };
      }
    },
    computed: {
    },
    watch: {
      offForm: function(v) {
        if (v) {
          this.style = {
            height: "62px",
            overflow: "hidden"
          };
        } else {
          this.style = {
            height: "auto",
            overflow: "hidden"
          };
        }
      }
    },
    methods: {
        search(){
            let params={
                processInstanceId:'130040',
            }
            this.$api
          .formPost("/api/activity/commTaskassignee/findPicture", params)
          .then(res => {
            if (res.retHead.code == "0000000") {
               this.imgSrc="data:image/png;base64,"+res.retBody;
            }else{
                this.$message({
                  message: res.retHead.message,
                  type: "error"
                });
            }
          });
        },
        leaveApply(index,row){
            let params={
                id:row.id,
                leaveType:row.leaveType,
            }
            this.$api
          .formPost("/api/activity/startFlowByKey", params)
          .then(res => {
            if (res.retHead.code == "0000000") {
                this.$message({
                  message: "启动成功！",
                  type: "success"
                });
            }else{
                this.$message({
                  message: res.retHead.message,
                  type: "error"
                });
            }
          });
        },
        handleDownload() {
        this.downloadLoading = true;
        import("@/vendor/Export2Excel").then(excel => {
          const tHeader = [
            "请假申请表",
            "请假类型",
            "开始时间",
            "结束时间",
            "时长",
            "请假人",
            "请假状态",
            "审核人",
            "审批人",
            "请假事由",
            "审核人id",
            "审批人id",
            "请假人id",
                      ];
          const filterVal = [
            "id",
            "leaveType",
            "startTime",
            "endTime",
            "timeLength",
            "leaveUserName",
            "leaveStatus",
            "checkUserName",
            "approvalUserName",
            "leaveRemarks",
            "checkUserId",
            "approvalUserId",
            "leaveUserId",
                      ];
          const data = this.formatJson(filterVal, this.tableData);
          excel.export_json_to_excel({
            header: tHeader,
            data,
            filename: "table-list"
          });
          this.downloadLoading = false;
        });
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v =>
          filterVal.map(j => {
            if (j === "timestamp") {
              return parseTime(v[j]);
            } else {
              return v[j];
            }
          })
        );
      },
      handleCheckedChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === defaultFormThead.length;
        this.isIndeterminate =
          checkedCount > 0 && checkedCount < defaultFormThead.length;
      },
      handleCheckAllChange(val) {
        this.showItemList = val ? defaultFormThead : [];
        this.isIndeterminate = false;
      },
      sizeChange(n) {
        this.pageSize = n;
        this.init();
      },
      currentChange(n) {
        this.currentPage = n;
        this.init();
      },
      init() {
        let searchForm = {};
          searchForm.leaveType=this.ruleForm.leaveType;
                               if (this.ruleForm.startTime) {
          searchForm.startTime=this.ruleForm.startTime;
        }
                               if (this.ruleForm.endTime) {
          searchForm.endTime=this.ruleForm.endTime;
        }
          searchForm.timeLength=this.ruleForm.timeLength;
          searchForm.leaveUserName=this.ruleForm.leaveUserName;
          searchForm.leaveStatus=this.ruleForm.leaveStatus;
          searchForm.checkUserName=this.ruleForm.checkUserName;
          searchForm.approvalUserName=this.ruleForm.approvalUserName;
          searchForm.leaveRemarks=this.ruleForm.leaveRemarks;
          let params = {
            pageNum: this.currentPage,
            pageSize: this.pageSize,
            ...searchForm
          };
        this.$api
          .formPost("/api/activity/leaveApply/doGetList", params)
          .then(res => {
            if (res.retHead.code == "0000000") {
              this.tableData = res.retBody.list;
              this.total = res.retBody.total;
              this.currentPage = res.retBody.pageNum;
            }
          });
      },
      showDialog() {
        this.dialogFormVisible = true;
        this.$nextTick(() => {
          this.resetForm("addForm");
        });
        this.form = {};
      },
      showEditDialog(index, row) {
                     if (row.id) {
                          this.editForm.id=row.id;
                     }else{
                         this.editForm.id='';
                     }
                     if (row.leaveType) {
                          this.editForm.leaveType=row.leaveType;
                     }else{
                         this.editForm.leaveType='';
                     }
                      if (row.startTime) {
                              this.editForm.startTime=new Date(row.startTime);
                        }else{
                            this.editForm.startTime='';
                        }
                      if (row.endTime) {
                              this.editForm.endTime=new Date(row.endTime);
                        }else{
                            this.editForm.endTime='';
                        }
                     if (row.timeLength) {
                          this.editForm.timeLength=row.timeLength;
                     }else{
                         this.editForm.timeLength='';
                     }
                     if (row.leaveUserName) {
                          this.editForm.leaveUserName=row.leaveUserName;
                     }else{
                         this.editForm.leaveUserName='';
                     }
                     if (row.leaveStatus) {
                          this.editForm.leaveStatus=row.leaveStatus;
                     }else{
                         this.editForm.leaveStatus='';
                     }
                     if (row.checkUserName) {
                          this.editForm.checkUserName=row.checkUserName;
                     }else{
                         this.editForm.checkUserName='';
                     }
                     if (row.approvalUserName) {
                          this.editForm.approvalUserName=row.approvalUserName;
                     }else{
                         this.editForm.approvalUserName='';
                     }
                     if (row.leaveRemarks) {
                          this.editForm.leaveRemarks=row.leaveRemarks;
                     }else{
                         this.editForm.leaveRemarks='';
                     }
                     if (row.checkUserId) {
                          this.editForm.checkUserId=row.checkUserId;
                     }else{
                         this.editForm.checkUserId='';
                     }
                     if (row.approvalUserId) {
                          this.editForm.approvalUserId=row.approvalUserId;
                     }else{
                         this.editForm.approvalUserId='';
                     }
                     if (row.leaveUserId) {
                          this.editForm.leaveUserId=row.leaveUserId;
                     }else{
                         this.editForm.leaveUserId='';
                     }
          this.dialogEditVisible = true;
      },
      handleAdd() {
        this.$refs.addForm.validate(valid => {
          if (valid) {
            let addFormParams = {};
                         addFormParams.leaveType=this.addForm.leaveType;
                      if (this.addForm.startTime){
                          addFormParams.startTime=this.addForm.startTime;
                       }
                      if (this.addForm.endTime){
                          addFormParams.endTime=this.addForm.endTime;
                       }
                         addFormParams.timeLength=this.addForm.timeLength;
                         addFormParams.leaveUserName=this.addForm.leaveUserName;
                         addFormParams.leaveStatus=this.addForm.leaveStatus;
                         addFormParams.checkUserName=this.addForm.checkUserName;
                         addFormParams.approvalUserName=this.addForm.approvalUserName;
                         addFormParams.leaveRemarks=this.addForm.leaveRemarks;
                         addFormParams.checkUserId=this.addForm.checkUserId;
                         addFormParams.approvalUserId=this.addForm.approvalUserId;
                         addFormParams.leaveUserId=this.addForm.leaveUserId;
          this.$api
            .formPost("/api/activity/leaveApply/doSave", addFormParams)
            .then(res => {
              if (res.retHead.code == "0000000") {
                this.$message({
                  message: "添加成功！",
                  type: "success"
                });
                this.dialogFormVisible = false;
                this.init();
              } else {
                this.$message({
                  message: "添加失败！",
                  type: "error"
                });
              }
            });
      }else{
          this.$message.error("请完善表单！")
        };
    });
      },
    handleEdit() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          let editFormParams = {};
                         editFormParams.leaveType=this.editForm.leaveType;
                      if (this.editForm.startTime){
                          editFormParams.startTime=this.editForm.startTime;
                       }
                      if (this.editForm.endTime){
                          editFormParams.endTime=this.editForm.endTime;
                       }
                        editFormParams.id=this.editForm.id;
                         editFormParams.timeLength=this.editForm.timeLength;
                         editFormParams.leaveUserName=this.editForm.leaveUserName;
                         editFormParams.leaveStatus=this.editForm.leaveStatus;
                         editFormParams.checkUserName=this.editForm.checkUserName;
                         editFormParams.approvalUserName=this.editForm.approvalUserName;
                         editFormParams.leaveRemarks=this.editForm.leaveRemarks;
                         editFormParams.checkUserId=this.editForm.checkUserId;
                         editFormParams.approvalUserId=this.editForm.approvalUserId;
                         editFormParams.leaveUserId=this.editForm.leaveUserId;
        this.$api
          .formPost("/api/activity/leaveApply/doModById", editFormParams)
          .then(res => {
            if (res.retHead.code == "0000000") {
              this.$message.success("执行成功！");
              this.init();
              this.dialogEditVisible = false;
            } else {
              this.$message.error("执行失败！");
            }
          });
    }else{
          this.$message.error("请完善表单！")
        };
        });
      },
  
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该项, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$api
            .formPost("/api/activity/leaveApply/doRmById", {
              id: row.id
            })
            .then(res => {
              if (res.retHead.code == "0000000") {
                this.$message({
                  message: "操作成功！",
                  type: "success"
                });
                this.init();
              } else {
                this.$message({
                  message: "操作失败！",
                  type: "error"
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    submitForm(formName) {
      this.init();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
    },
    created() { }
  };
  </script>
  <style lang='scss' scoped>
    .btns {
      text-align: right;
    }
  
    .icon-arrow {
      position: absolute;
      bottom: 5px;
      left: 0;
      width: 100%;
      height: 1px;
      background-color: #f1f1f1;
  
      i {
        background-color: #fff;
        position: absolute;
        color: #999;
        bottom: -7px;
        margin-left: 50%;
        transform: translateX(-50%);
        cursor: pointer;
      }
    }
  </style>